<template>
  <div>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="padding-top:10px">
        <el-form ref="form" :model="formData" label-width="70px" size="small">
          <el-row :gutter="24">
            <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
              <el-form-item :label="$t('recipe.equipment')" label-width="40px" class="w-100">
                <el-select v-model="formData.equipment" placeholder="" clearable>
                  <el-option v-for="(item,index) in equipmentList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
              <el-form-item :label="$t('basic.stage')" label-width="40px" class="w-100">
                <el-select v-model="formData.phase" placeholder="" clearable>
                  <el-option v-for="(item,index) in phaseList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
              <el-form-item label-width="0px">
                <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="tableAuto" style="width:100%">
          <el-table border :data="tableData" :height="height" v-loading="tableLoading" style="width: 100%"
            :header-cell-style="{background:'#EAEBEC'}">
            <el-table-column prop="" :label="$t('recipe.equipment')" align="left">
              <template slot-scope="scope">
                {{scope.row.phaseVo ? scope.row.phaseVo.phaseDesc : ''}}
              </template>
            </el-table-column>
            <el-table-column prop="" :label="$t('basic.stage')" align="left">
              <template slot-scope="scope">
                {{scope.row.equipmentVo ? scope.row.equipmentVo.entName : ''}}
              </template>
            </el-table-column>
            <el-table-column prop="paraName" :label="$t('basic.argu')" align="left"></el-table-column>
            <el-table-column prop="target" label="数值" align="left"></el-table-column>
            <el-table-column prop="uom" :label="$t('basic.company')" align="left"></el-table-column>
          </el-table>
        </div>

      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="padding-top:10px">
        <p class="title">{{$t('run.real_line')}}</p>
        <div ref="lineChart" style="width:100%" :style="{height:height}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { LineChart } from './LineChart'
import { formula } from "@/api/formula"
import { configure } from "@/api/configure"
export default {
  props: {
    stepObj: Object,
    count: Number
  },
  data () {
    return {
      height: "200px",
      formData: {
        equipment: "",
        phase: ""
      },
      equipmentList: [],
      phaseList: [],
      tableData: ['', '', ''],
      tableLoading: false,
      uomIdList: []
    }
  },
  watch: {
    count (val) {
      let arr = [16] //自动phase
      let arr1 = [17] //数据phase
      if (arr.indexOf(this.stepObj.serialNo) > -1 && this.stepObj.fid) { //数据录入
        this.phaseAutoFind()
      } else if (arr1.indexOf(this.stepObj.serialNo) > -1 && this.stepObj.fid) {
        this.phaseDataList()
      } else {
        this.tableData = ['', '', '']
      }
    }
  },
  created () {
    this.getUomList()
    this.$nextTick(() => {
      this.myCharts()
    })
  },
  methods: {
    // 获取计量单位列表
    getUomList () {
      const param = {
        page: 1,
        size: 9999
      }
      configure.getUomList(param).then(res => {
        if (res.code == 200) {
          this.uomIdList = res.data.rows
        }
      }).catch(e => {

      })
    },
    handleSearch () {

    },
    phaseAutoFind () {
      const param = {
        phaseId: this.stepObj.fid
      }
      this.tableLoading = true
      formula.phaseAutoList(param).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
        }
        this.tableLoading = false
      })
    },
    phaseDataList () {
      const param = {
        phaseId: this.stepObj.fid
      }
      this.tableLoading = true
      formula.phaseDataList(param).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
        }
        this.tableLoading = false
      })
    },
    myCharts () {
      var dom = this.$refs.lineChart;
      var myChart = this.$echarts.init(dom);
      if (LineChart() && typeof LineChart() === "object") {
        myChart.setOption(LineChart(), true);
      }
      this.echartsResize(dom)
    },
    echartsResize (doc) {
      let sizeFun = () => {
        this.$echarts.init(doc).resize()
      }
      setTimeout(() => {
        window.addEventListener('resize', sizeFun)
      }, 100)
    },
  }
}
</script>

<style scoped>
.title {
  padding-left: 20px;
  margin-bottom: 20px;
}
.tableAuto >>> .cell {
  min-height: 23px;
}
</style>